<template>
    <div class="knowledge-editor">
        <div class="editor-header">
            <div class="header-left">
                <span class="header-icon">🔧</span>
                <span class="header-title">知识图谱 编辑模式</span>
            </div>
            <div class="header-right">
                <input class="search-input" placeholder="搜索" />
                <select class="class-select">
                    <option>默认班级</option>
                </select>
                <button class="save-btn" @click="saveAll">保存</button>
            </div>
        </div>
        <div class="tree-panel">
            <KnowledgeNode v-for="node in localNodes.filter(n => n.parentId === null)" :key="node.id" :node="node"
                :all-nodes="localNodes" :expanded-node-ids="expandedNodeIds" @toggle-expand="handleToggleExpand"
                @add-sibling="addSibling" @add-child="addChild" @open-relation="openRelationDialog" />
        </div>
        <RelationDialog v-if="showRelationDialog && selectedNode" :visible="showRelationDialog" :node="selectedNode"
            :all-nodes="localNodes" @close="showRelationDialog = false" />
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue'
    import KnowledgeNode from './KnowledgeNode.vue'
    import RelationDialog from './RelationDialog.vue'
    const props = defineProps({
        knowledgeList: { type: Array, required: true }
    })
    const emit = defineEmits(['save'])
    const localNodes = ref([])
    watch(() => props.knowledgeList, (val) => {
        localNodes.value = JSON.parse(JSON.stringify(val))
    }, { immediate: true })

    function saveAll() {
        emit('save', JSON.parse(JSON.stringify(localNodes.value)))
    }

    const expandedNodeIds = ref(new Set())
    function handleToggleExpand(nodeId) {
        if (expandedNodeIds.value.has(nodeId)) {
            expandedNodeIds.value.delete(nodeId)
        } else {
            expandedNodeIds.value.add(nodeId)
        }
    }

    function addSibling({ node, name }) {
        if (!name) return
        const newNode = {
            id: 'node_' + Date.now(),
            name,
            parentId: node.parentId
        }
        localNodes.value.push(newNode)
        expandedNodeIds.value.add(newNode.id)
    }

    function addChild({ node, name }) {
        if (!name) return
        const newNode = {
            id: 'node_' + Date.now(),
            name,
            parentId: node.id
        }
        localNodes.value.push(newNode)
        expandedNodeIds.value.add(newNode.id)
    }

    // 关系设置弹窗逻辑
    const showRelationDialog = ref(false)
    const selectedNode = ref(null)
    function openRelationDialog(node) {
        selectedNode.value = node
        showRelationDialog.value = true
    }
</script>

<style scoped>
    .knowledge-editor {
        width: 100vw;
        height: 100vh;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        background: #f8fafc;
        box-sizing: border-box;
    }

    .editor-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 32px;
        background: #f4f8ff;
        border-bottom: 1.5px solid #e6eaf0;
        min-height: 64px;
        height: 64px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .header-left {
        display: flex;
        align-items: center;
    }

    .header-icon {
        font-size: 28px;
        margin-right: 12px;
        color: #3a7afe;
    }

    .header-title {
        font-size: 22px;
        font-weight: bold;
        color: #232c3b;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .search-input {
        width: 180px;
        height: 36px;
        border: 1px solid #d0d8e0;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 16px;
        background: #fff;
        outline: none;
        transition: border 0.2s;
    }

    .search-input:focus {
        border: 1.5px solid #3a7afe;
    }

    .class-select {
        height: 36px;
        border: 1px solid #d0d8e0;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 16px;
        background: #fff;
        outline: none;
    }

    .save-btn {
        height: 36px;
        min-width: 80px;
        background: #3a7afe;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        margin-left: 8px;
        cursor: pointer;
        transition: background 0.2s;
        box-shadow: 0 2px 8px #e0e7ef33;
    }

    .save-btn:hover {
        background: #2563eb;
    }

    .tree-panel {
        flex: 1 1 0;
        width: 100%;
        min-height: 0;
        overflow: auto;
        background: transparent;
        padding: 0 32px 0 32px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
</style>